<template>
  <a-modal
    title="合同协同链接"
    :width="700"
    :visible="visible"
    @cancel="handleCancel"
    cancelText="关闭"
    :footer="null"
  >
    <!-- 上方白色信息区 -->
    <div v-if="visible1">
      <div class="info-section">
        <h3 class="supplier-name">合同名称：{{ formInfo.contractName }}</h3>
        <p class="instruction">
          请将下方链接提供给供应商，由供应商填写企业资质信息：
        </p>

        <div class="link-group">
          <div class="link-item">
            <span class="label">协同链接：</span>

            <a-input
              class="input"
              readOnly
              :value="formInfo.collaborativeKey"
              style="width: calc(80% - 64px)"
            />
          </div>

          <div class="code-item">
            <span class="label">校 验 码：</span>
            <a-input
              class="input"
              readOnly
              :value="formInfo.checkCode"
              style="width: 120px"
            />
          </div>

          <div class="expiry">
            <span class="label">有 效 期：</span>
            <a-input
              readOnly
              class="input"
              :value="formInfo.collaborationValidityTime"
              style="width: calc(80% - 64px)"
            />
          </div>
        </div>
      </div>

      <!-- 下方灰色操作区 -->
      <div style="text-align: right; margin-top: 15px; margin-right: 25px">
        <a-button type="primary" @click="copyAllInfo">复制</a-button>
      </div>
    </div>

    <div v-if="visible2">
      <div class="info-section">
        <h3 class="supplier-name">
          合同名称：
          <a-input
            style="margin-top: 14px"
            v-model="contractName"
            placeholder="请输入合同名称"
          />
        </h3>

        <h3 class="supplier-name">
          链接有效期(天)：
          <a-input
            type="number"
            :min="1"
            style="margin-top: 14px"
            v-model="linkValidityPeriod"
            placeholder="请输入链接有效期"
          />
        </h3>
      </div>
      <!-- 下方灰色操作区 -->
      <div style="text-align: right; margin-top: 15px; margin-right: 25px">
        <a-button type="primary" @click="generateSubmit">生成链接</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'devSupplierView',
  data() {
    return {
      visible: false,
      visible1: false,
      visible2: false,
      contractName: '',
      linkValidityPeriod: '',
      contractClassification: '',
      formInfo: {
        collaborationLink: '',
      },
      coordinationLink: '',
      verificationCode: '',
      collaborationValidityTime: '', //链接将于 2025-05-27 23:59:59 失效，请尽快完成填写
      url: {
        saveInfo: '/system/devContract/save',
        getInfo: '/system/devContract/info',
        cooperateWith: 'system/devContract/cooperateWith',
        generateLink: 'system/devContract/generateLink',
      },
    }
  },
  methods: {
    //生成链接
    generateSubmit() {
      var contractName = this.contractName
      if (contractName == null || contractName.length <= 0) {
        this.$message.error('合同名称不能为空')
        return
      }
      var linkValidityPeriod = this.linkValidityPeriod
      if (linkValidityPeriod == null || linkValidityPeriod.length <= 0) {
        this.$message.error('链接有效期不能为空')
        return
      }
      getAction(this.url.generateLink, {
        contractName: contractName,
        contractClassification: this.contractClassification,
        linkValidityPeriod: linkValidityPeriod,
      }).then((res) => {
        var time = parseFloat(linkValidityPeriod) * 24
        this.getCooperateWith(res.result.data, time, contractName)
        this.visible1 = true
        this.visible2 = false
      })
    },
    xttjShow(contractClassification) {
      this.visible2 = true
      this.visible1 = false
      this.visible = true
      this.contractClassification = contractClassification
    },
    show(record) {
      if (record.id) {
        this.getCooperateWith(record.id, '', record.contractName)
        this.visible1 = true
        this.visible2 = false
      }
      this.visible = true
    },
    getCooperateWith(id, time, contractName) {
      getAction(this.url.cooperateWith, {
        id: id,
        time: time,
      }).then((res) => {
        var result = res.result.data
        this.formInfo = JSON.parse(result)
        this.formInfo.contractName = contractName
        this.formInfo.id = id
        this.formInfo.collaborationValidityTime = `链接将于${this.formInfo.collaborationValidityTime}失效，请尽快完成填写`
        var collaborationLink = 'http://localhost:8000/system/'
        if (this.formInfo.contractClassification == '0') {
          //采购合同
          collaborationLink = collaborationLink + 'purchase'
        }
        if (this.formInfo.contractClassification == '1') {
          //保修合同
          collaborationLink = collaborationLink + 'warranty'
        }
        if (this.formInfo.contractClassification == '2') {
          //其他合同
          collaborationLink = collaborationLink + 'other'
        }
        this.formInfo.collaborationLink =
          collaborationLink + '?key=' + this.formInfo.collaborativeKey
      })
    },
    copyText(text) {
      const input = document.createElement('input')
      input.value = text
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      this.$message.success('复制成功')
    },
    copyAllInfo() {
      const content = `协同链接：${this.formInfo.collaborationLink} \t\n校验码：${this.formInfo.checkCode}\t\n有效期：${this.formInfo.collaborationValidityTime}`
      this.copyText(content)
    },

    // 关闭
    handleCancel() {
      this.close()
      this.$emit('close')
    },
    close() {
      this.visible = false
    },
  },
}
</script>
<style scoped>
@import url('../../../css/supplier/supplierView.css');

/* 输入框高度统一 */
.input {
  border: none; /* 隐藏边框 */
  background-color: transparent; /* 背景透明 */
  /* 或者设置一个特定的颜色 */
  color: #676767;
  font-size: 15px;
  height: 17px;
}
</style>
